<script setup lang="ts">
// 处理微信登录回调
// 微信扫码成功后，会跳转到你在后端配置的 redirect_uri，
// 页面 URL 会变成这样：http://yourdomain.com/login-callback?code=xxx&state=yyy
// 你需要一个专门的页面或在当前页面处理这个回调
onMounted(() => {
  initWechatLogin();
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  const state = urlParams.get('state');
  if (code && state) {
    // 通常这里会调用后端的 callback 接口，用 code 换取 token
    // loginByWechatCode(code, state).then(res => handleLoginSuccess(res.data.token));
    // 这里只是演示，实际项目需要一个专门的回调处理逻辑或页面
    console.log('接收到微信回调:', { code, state });
  }
})
// --- 微信扫码登录 ---
const initWechatLogin = async () => {
  try {
    // 1. 从后端获取微信登录所需的参数
    // getWechatLoginUrl().then(({ data }) => {
    //   // const { appid, scope, redirect_uri, state, style, href } = res.data;
    //   console.log( data )
    // })
    // 2. 使用 WxLogin 构造器生成二维码
    // WxLogin 是全局对象，来自我们引入的 JS 文件
    const re = new WxLogin({
      self_redirect: true, // 是否内嵌二维码，false 表示跳转
      id: "wechat-login-container", // 容器 ID
      appid: "wxcb513e3535c05a42",
      scope: "snsapi_login",
      redirect_uri: "https://sacasaca.com/wechatloginsuccess.html", // 扫码成功后，微信会携带 code 和 state 跳转到这个地址
      state: "state",
      style: "black", // "black" or "white"
      href: "", // 自定义样式表的 URL
    })
  } catch (error) {
    console.error('初始化微信登录失败:', error);
  }
}

</script>

<template>
  <div style="width: 100%;height: 400px;padding-top: 100px;">
  <div id="wechat-login-container" style="margin-top: 50px;"></div></div>
</template>
